<!--
* @author wn
* @date 2022/09/07 11:14:01
* @description: 个人中心--订单 入口 页面
* JSX语法
!-->
<template>
	<div class="member-order-page" v-if="orderStatus">
		<!-- tabs组件 -->
		<xtx-tabs v-model="activeName" @tab-click="tabClick">
			<xtx-tabs-panel
				v-for="item in orderStatus"
				:key="item.name"
				:label="item.label"
				:name="item.name"
			>
			</xtx-tabs-panel>
		</xtx-tabs>
		<!-- 订单列表 -->
		<div class="order-list">
			<!-- 暂无数据时显示加载状态 -->
			<div v-if="!loading && !orderList.length" class="none">暂无数据</div>
			<div v-if="loading" class="loading"></div>
			<order-item
				v-else
				v-for="order in orderList"
				:key="order.id"
				:order="order"
				@on-cancel="onCancel"
				@on-delete="onDelete"
				@on-confirm="onConfirm"
				@on-logistics="onLogistics"
			/>
		</div>
		<!-- 分页组件 -->
		<xtx-pagination
			v-if="total && !loading"
			@current-change="currentChange"
			:total="total"
			:currPage="page"
			:pageSize="pageSize"
		/>
		<!-- 确认框组件 内 含有 dialog 中 v-model 控制显示隐藏
			所以 这里 使用 确认框  实例  控制函数
		Teleport--对于像：对话框，消息提示，确认提示，通知组件 适合使用传送门

		虽然是固定定位  fixed   位置相对于当前窗口
		但是 嵌套 太深的话   只要 父类  有 一个 使用了  transform translateX 等 位移
		其定位 就会 相对于  父类  而非 窗口了
		且会收到 z-index 影响  所以  使用 Teleport 提到 顶层  就不会有 深套 问题影响
		-->
		<teleport to="body">
			<!-- 取消订单  组件 -->
			<order-cancel ref="target" />
			<!-- 查看物流  组件 -->
			<order-logistics ref="targetLogistics" />
		</teleport>
	</div>
</template>
<script>
import { reactive, ref, toRefs, watch } from 'vue'
import { orderStatus } from '@/network/constants'
import OrderItem from './components/OrderItem'
import OrderCancel from './components/OrderCancel'
import OrderLogistics from './components/OrderLogistics'
import { deleteOrder, findOrderList, confirmOrder } from '@/network/order'
import Confirm from '@/components/library/confirm'
import Message from '@/components/library/message'

export default {
	name: 'index',
	components: { OrderItem, OrderCancel, OrderLogistics },
	setup() {
		// v-model 默认 全部订单
		const activeName = ref('all')
		// 获取订单列表
		const orderList = ref([])
		const params = reactive({ page: 1, pageSize: 5, orderState: 0 })
		// 总数据 条数
		const total = ref(0)

		/**
		 * 点击 tabs 时  根据 tab-click 获取 index--i
		 * 修改 当前页 为 第一页
		 * 监视 params 调用 API 更新 orderList
		 */
		const tabClick = ({ i }) => {
			params.page = 1
			params.orderState = i
		}

		// 点击分页组件  获取 当前页码 index
		const currentChange = index => (params.page = index)

		// 暂无数据时显示加载状态
		const loading = ref(false)

		// 监视 params 调用 API 更新 orderList
		// 立马执行 取代 初始化  调用 API
		watch(
			params,
			async newParams => {
				loading.value = true
				const { result } = await findOrderList(newParams)
				loading.value = false
				total.value = result.counts
				orderList.value = result.items
			},
			{ immediate: true }
		)

		return {
			activeName,
			orderList,
			...toRefs(params),
			total,
			tabClick,
			currentChange,
			orderStatus,
			loading,
			...useOnCancel(),
			...useOnDelete(orderList),
			...useOnConfirm(),
			...useOnLogistics(),
		}
	},
}

// 抽离 函数  返回 { }
// 取消订单
export const useOnCancel = () => {
	const target = ref(null)
	const onCancel = order => {
		target.value.open(order)
	}
	return { onCancel, target }
}

// 查看物流
export const useOnLogistics = () => {
	const targetLogistics = ref(null)
	const onLogistics = order => {
		targetLogistics.value.open(order.id)
	}
	return { onLogistics, targetLogistics }
}

// 确认收货
export const useOnConfirm = () => {
	const onConfirm = async order => {
		try {
			await Confirm({
				message: '您确认收到货吗？确认后货款将会打给卖家。',
			})
			await confirmOrder(order.id)
			Message({ type: 'success', message: '确认收货成功' })
			// 确认收货后状态变成 待评价(4 为待评价)
			order.orderState = 4
		} catch (error) {}
	}
	return { onConfirm }
}

// 删除订单
const useOnDelete = orderList => {
	const onDelete = async orderId => {
		try {
			await Confirm({
				message: '亲，您确认删除该条订单吗？',
			})
			await deleteOrder([orderId])
			Message({ type: 'success', message: '删除订单成功' })
			// 重新 调用 findOrderList 刷新页面  我这里采用  筛选 orderList 数组
			// 这样 pageSize 会变小
			orderList.value = orderList.value.filter(order => order.id !== orderId)
		} catch (error) {}
	}
	return { onDelete }
}
</script>
<style scoped lang="less">
.member-order-page {
	height: 100%;
	background-color: #fff;
	.order-list {
		padding: 20px;
		.loading {
			min-height: 600px;
			background: rgba(255, 255, 255, 0.9) url(~@/assets/images/loading.gif)
				no-repeat center / 100px;
		}
		.none {
			min-height: 600px;
			text-align: center;
			line-height: 600px;
			font-size: 20px;
			color: #999;
		}
	}
}
</style>
